<template>
	<view>
		<scroll-view scroll-y="true" class="main">
			<view class="content">
				<view class="detail">
					<view class="title2" style="line-height: 1.7;">{{detail.title}}</view>
					<view class="read">
						<text>{{detail.readNum}} 阅读</text>
						<text>|</text>
						<text>发布于 {{detail.publishDate}}</text>
					</view>
					<image :src="$baseUrl + detail.cover" mode=""></image>
					<rich-text :nodes="detail.content" class="content"></rich-text>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
				<view class="recommend" style="padding: 20rpx;">
					<view class="title1">新闻推荐</view>
					<view class="recommend-list">
						<view class="news-item" style="display: flex;flex-direction: row;justify-content: space-between;
						align-items: center;padding: 20rpx 0;border-top: 2rpx solid #e4e7ed;" v-for="item in recommendList">
							<view class="left" style="width: 450rpx;">
								<view class="top" style="height: 168rpx;">
									<text class="line" style="font-size: 32rpx;font-weight: bold;">{{item.title}}</text>
									<rich-text :nodes="item.content" class="line" style="font-size: 26rpx;"></rich-text>
								</view>
								<view class="bottom" style="display: flex;flex-direction: row;color: #666;font-size: 22rpx;">
									<text>{{item.readNum}} 阅读</text>
									<text style="margin-left: 20rpx;">{{item.publishDate}}</text>
								</view>
							</view>
							<view class="right center">
								<navigator :url="`/pages/news-detail/news-detail?id=${item.id}`">
									<image :src="$baseUrl + item.cover" mode="" style="width: 250rpx;height: 200rpx;"></image>
								</navigator>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
				<view class="comment">
					<view class="title2">{{total}} 条评论</view>
					<view class="comment-list">
						<view class="comment-item" v-for="item in commentList">
							<view class="left">
								<u-avatar :src="src" size="80"></u-avatar>
							</view>
							<view class="right">
								<view class="top">
									<text>{{item.userName}}</text>
									<view class="thumb center">
										<u-icon name="thumb-up" size="45"></u-icon>
										<text>{{item.likeNum}}</text>
									</view>
								</view>
								<view class="comment-content">{{item.content}}</view>
								<view class="date">{{item.commentDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bar">
			<input type="text" placeholder="请输入评论内容" @click="show = true">
			<u-icon name="chat" class="icon"></u-icon>
			<text>{{detail.commentNum}}</text>
			<u-icon name="thumb-up" class="icon"></u-icon>
			<text>{{detail.likeNum}}</text>
		</view>
		<u-popup mode="bottom" v-model="show" class="popup">
			<view class="content">
				<textarea placeholder="字数限制150字" v-model="value" auto-height="true"></textarea>
				<button class="bu" @click="submit" style="width: 120rpx;" :disabled="value === '' ? true : false">发表</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				detail: () => {},
				recommendList: [],
				commentList: [],
				total: 0,
				id: 0,
				src: '',
				value: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail(option.id)
			this.getRecommend()
			this.getComment(option.id)
		},
		methods:{
			getDetail(id){
				this.$request({
					url: '/prod-api/press/press/' + id
				}).then(res => {
					this.detail = res.data
					uni.setNavigationBarTitle({
						title:this.detail.title
					})
				})
			},
			getRecommend(){
				this.$request({
					url: '/prod-api/press/press/list',
					data: {
						top: 'Y'
					}
				}).then(res => {
					this.recommendList = res.rows
				})
			},
			getComment(id){
				this.$request({
					url: '/prod-api/press/comments/list',
					data: {
						newsId: id
					}
				}).then(res => {
					this.commentList = res.rows.sort((a,b) => {
						return new Date(b.commentDate).getTime() - new Date(a.commentDate).getTime()
					})
					this.total = res.total
				})
			},
			submit(){
				this.$request({
					url: '/prod-api/press/pressComment',
					method: 'POST',
					data: {
						content: this.value
					}
				}).then(res => {
					if(res.code === 200){
						uni.showToast({
							title:'发表成功'
						})
						this.getComment(this.id)
						this.show = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
view{
	.main{
		height: 1116rpx;
		.content{
			height: fit-content;
			.detail{
				padding: 20rpx;
				.read{
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					text{
						color: #666;
						font-size: 22rpx;
						margin-left: 20rpx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
				image{
					width: 100%;
					margin: 20rpx auto;
				}
				.content{
					line-height: 1.7;
				}
			}
			.comment{
				padding: 20rpx;
				.comment-list{
					padding: 20rpx 0;
					display: flex;
					flex-direction: column;
					.comment-item{
						display: flex;
						padding: 20rpx 0;
						border-top: 2rpx solid #e4e7ed;
						flex-direction: row;
						justify-content: space-between;
						.left{
							width: 100rpx;
						}
						.right{
							flex: 1;
							display: flex;
							flex-direction: column;
							.top{
								height: 80rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								text{
									color: black;
								}
								.thumb{
									color: #666;
									display: flex;
									flex-direction: row;
									text{
										padding: 20rpx;
										color: #666;
									}
								}
							}
							.comment-content{
								height: 168rpx;
								-webkit-line-clamp: 4;
							}
							.date{
								color: #666;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
	.bar{
		height: 100rpx;
		background-color: #f2f3f4;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		input{
			width: 380rpx;
			height: 60rpx;
			background-color: #e4e7ed;
			padding-left: 20rpx;
		}
		.icon{
			font-size: 50rpx;
			color: #666;
			margin-left: 20rpx;
		}
		text{
			margin-left: 20rpx;
			color: #666;
		}
	}
	.popup{
		.content{
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			textarea{
				width: 500rpx;
				min-height: 80rpx;
				padding: 20rpx;
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
